import React from 'react';
import { Link } from 'react-router-dom';
import styles from './index.module.css';
import menuData from '../../data/menuData.json';
const recommendationData = menuData.filter(item => item.isRecommended);

const RecommendationsSection = () => {
  return (
    <div className={styles.container}>
      <h2 className={styles.title}>推荐工具</h2>
      <div className={styles.cardGrid}>
        {recommendationData.map((item, index) => (
          <Link key={index} to={item.path} className={styles.cardLink}>
            <div className={styles.card}>
              <div className={styles.cardContent}>
                <h3 className={styles.cardTitle}>{item.label}</h3>
                <p className={styles.cardDescription}>{item.description}</p>
                <div className={styles.cardCategory}>{item.category}</div>
              </div>
              <span className={styles.arrow}>→</span>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default RecommendationsSection;